<template>
    <div>
        <el-row :gutter="20" class="mgb20">
            <el-col :span="12">
                <el-card shadow="hover">
                    <div class="card-header" style="display: flex;">
                        <div class="card-header-title">适配测试情况</div>
                        <el-select v-model="value" placeholder="分类" style="width: 100px;margin-left: 10px;">
                            <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name" />
                        </el-select>
                        <el-select v-model="value2" placeholder="地域" style="width: 100px;margin-left: 10px;">
                            <el-option v-for="item in options2" :key="item.name" :label="item.name"
                                :value="item.name" />
                        </el-select>
                        <el-select v-model="value3" placeholder="产品" style="width: 100px;margin-left: 10px;">
                            <el-option v-for="item in options3" :key="item.name" :label="item.name"
                                :value="item.name" />
                        </el-select>
                        <el-select v-model="value4" placeholder="状态" style="width: 100px;margin-left: 10px;">
                            <el-option v-for="item in options4" :key="item.name" :label="item.name"
                                :value="item.name" />
                        </el-select>
                    </div>
                    <v-chart class="chart" :option="barOptions" />
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover">
                    <div class="card-header" style="display: flex;">
                        <div class="card-header-title">产品适配进度</div>
                        <el-select v-model="value" placeholder="分类" style="width: 100px;margin-left: 10px;">
                            <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name" />
                        </el-select>
                        <el-select v-model="value2" placeholder="地域" style="width: 100px;margin-left: 10px;">
                            <el-option v-for="item in options2" :key="item.name" :label="item.name"
                                :value="item.name" />
                        </el-select>
                        <el-select v-model="value3" placeholder="产品" style="width: 100px;margin-left: 10px;">
                            <el-option v-for="item in options3" :key="item.name" :label="item.name"
                                :value="item.name" />
                        </el-select>
                        <el-select v-model="value4" placeholder="状态" style="width: 100px;margin-left: 10px;">
                            <el-option v-for="item in options4" :key="item.name" :label="item.name"
                                :value="item.name" />
                        </el-select>
                    </div>
                    <div style="display: flex;">
                        <v-chart class="chart" :option="dashOpt2" style="width: 200px;" />
                        <v-chart class="chart" :option="dashOpt2" style="width: 200px;" />
                    </div>

                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card shadow="hover" :body-style="{ height: '600px' }">
                    <div class="card-header" style="display: flex;">
                        <div class="card-header-title">产品适配问题情况统计</div>
                        <el-select v-model="value" placeholder="分类" style="width: 100px;margin-left: 10px;">
                            <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name" />
                        </el-select>
                        <el-select v-model="value2" placeholder="地域" style="width: 100px;margin-left: 10px;">
                            <el-option v-for="item in options2" :key="item.name" :label="item.name"
                                :value="item.name" />
                        </el-select>
                        <el-select v-model="value3" placeholder="产品" style="width: 100px;margin-left: 10px;">
                            <el-option v-for="item in options3" :key="item.name" :label="item.name"
                                :value="item.name" />
                        </el-select>
                        <el-select v-model="value4" placeholder="状态" style="width: 100px;margin-left: 10px;">
                            <el-option v-for="item in options4" :key="item.name" :label="item.name"
                                :value="item.name" />
                        </el-select>
                    </div>
                    <v-chart class="chart" :option="barOptions" />
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover" :body-style="{ height: '600px' }">
                    <div class="card-header">
                        <p class="card-header-title">天梯排行服务器</p>
                    </div>
                    <v-chart class="chart" :option="newbarOptions" />
                </el-card>
            </el-col>

        </el-row>

        <!--<el-card shadow="hover" style="margin-top: 20px;">
            <div class="card-header">
                <div class="card-header-title">产品适配问题情况统计</div>
            </div>
            <el-table :data="tableDataReport" border style="width: 100%">
                <el-table-column prop="index" label="序号" />
                <el-table-column prop="name" label="应用名称" />
                <el-table-column prop="num" label="报告下载次数" />
                <el-table-column prop="creater" label="创建人" />
                <el-table-column prop="createtime" label="创建时间" />
                <el-table-column prop="" label="操作">
                    <template #default="scope">
                        <el-button type="primary" size="small">
                            查看详情
                        </el-button>
                        <el-button type="primary" style="margin-left: 10px;" size="small">
                            下载报告
                        </el-button>
                    </template>
</el-table-column>
</el-table>
</el-card> -->
    </div>
</template>

<script setup lang="ts" name="dashboard">
import countup from '@/components/countup.vue';
import { use, registerMap } from 'echarts/core';
import { BarChart, LineChart, PieChart, MapChart } from 'echarts/charts';
import {
    GridComponent,
    TooltipComponent,
    LegendComponent,
    TitleComponent,
    VisualMapComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';
import { barOptions, dashOpt1, dashOpt2, mapOptions, lineOptions } from './chart/options';
import chinaMap from '@/utils/china';
import { ref } from 'vue';
use([
    CanvasRenderer,
    BarChart,
    GridComponent,
    LineChart,
    PieChart,
    TooltipComponent,
    LegendComponent,
    TitleComponent,
    VisualMapComponent,
    MapChart,
]);
registerMap('china', chinaMap);

const newbarOptions = {
    xAxis: {
        type: 'category',
        data: ['银河麒麟V10', '银河麒麟V4', '中标麒麟V7.6', '统信UOS V20', '龙蜥8.4'],
    },
    yAxis: {
        type: 'value',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
    },
    // color: ['#009688', '#f44336'],
    series: [
        {
            data: [300, 280, 210, 170, 120, 80, 50],
            type: 'bar',
        },
        // {
        //     data: [180, 230, 190, 120, 110, 230, 235],
        //     type: 'bar',
        // },
    ],
};

const options = ref([{
    name: '全类型'
}, {
    name: '类型1'
},])
const value = ref('')

const options2 = ref([{
    name: '全类型'
}, {
    name: '深圳'
},])
const value2 = ref('')

const options3 = ref([{
    name: '全类型'
}, {
    name: '产品1'
},])
const value3 = ref('')

const options4 = ref([{
    name: '全类型'
}, {
    name: '状态1'
},])
const value4 = ref('')

const tableDataReport = ref([
    {
        index: '1',
        name: '检测机构1',
        num: 10,
        creater: '李亮',
        createtime: '2024-01-01 17:30'
    },
    {
        index: '2',
        name: '检测机构2',
        num: 10,
        creater: '李明',
        createtime: '2024-01-01 17:30'
    },
    {
        index: '2',
        name: '检测机构2',
        num: 10,
        creater: '李红',
        createtime: '2024-01-01 17:30'
    },
])
const tableData = ref([
    {
        index: '1',
        name: '检测机构1',
        num: 10,
        reportnum: 10
    },
    {
        index: '2',
        name: '检测机构2',
        num: 9,
        reportnum: 9
    },
    {
        index: '3',
        name: '检测机构3',
        num: 8,
        reportnum: 8
    },
    {
        index: '4',
        name: '检测机构4',
        num: 7,
        reportnum: 7
    },
    {
        index: '5',
        name: '检测机构5',
        num: 6,
        reportnum: 6
    },
    {
        index: '6',
        name: '检测机构6',
        num: 5,
        reportnum: 5
    },
    {
        index: '7',
        name: '检测机构7',
        num: 4,
        reportnum: 4
    },
    {
        index: '8',
        name: '检测机构8',
        num: 3,
        reportnum: 3
    },
    {
        index: '9',
        name: '检测机构9',
        num: 2,
        reportnum: 2
    },
    {
        index: '10',
        name: '检测机构10',
        num: 1,
        reportnum: 1
    },
])

const activities = [
    {
        content: '收藏商品',
        description: 'xxx收藏了你的商品，就是不买',
        timestamp: '30分钟前',
        color: '#00bcd4',
    },
    {
        content: '用户评价',
        description: 'xxx给了某某商品一个差评，吐血啊',
        timestamp: '55分钟前',
        color: '#1ABC9C',
    },
    {
        content: '订单提交',
        description: 'xxx提交了订单，快去收钱吧',
        timestamp: '1小时前',
        color: '#3f51b5',
    },
    {
        content: '退款申请',
        description: 'xxx申请了仅退款，又要亏钱了',
        timestamp: '15小时前',
        color: '#f44336',
    },
    {
        content: '商品上架',
        description: '运营专员瞒着你上架了一辆飞机',
        timestamp: '1天前',
        color: '#009688',
    },
];

const ranks = [
    {
        title: '手机',
        value: 10000,
        percent: 80,
        color: '#f25e43',
    },
    {
        title: '电脑',
        value: 8000,
        percent: 70,
        color: '#00bcd4',
    },
    {
        title: '相机',
        value: 6000,
        percent: 60,
        color: '#64d572',
    },
    {
        title: '衣服',
        value: 5000,
        percent: 55,
        color: '#e9a745',
    },
    {
        title: '书籍',
        value: 4000,
        percent: 50,
        color: '#009688',
    },
];
</script>

<style>
.card-body {
    display: flex;
    align-items: center;
    height: 100px;
    padding: 0;
}
</style>
<style scoped>
.card-content {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
    padding: 0 20px;
}

.card-num {
    font-size: 30px;
}

.card-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.bg1 {
    background: #2d8cf0;
}

.bg2 {
    background: #64d572;
}

.bg3 {
    background: #f25e43;
}

.bg4 {
    background: #e9a745;
}

.color1 {
    color: #2d8cf0;
}

.color2 {
    color: #64d572;
}

.color3 {
    color: #f25e43;
}

.color4 {
    color: #e9a745;
}

.chart {
    width: 100%;
    height: 400px;
}

.card-header {
    padding-left: 10px;
    margin-bottom: 20px;
}

.card-header-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.card-header-desc {
    font-size: 14px;
    color: #999;
}

.timeline-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #000;
}

.timeline-time,
.timeline-desc {
    font-size: 12px;
    color: #787878;
}

.rank-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.rank-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f2f2f2;
    text-align: center;
    line-height: 40px;
    margin-right: 10px;
}

.rank-item-content {
    flex: 1;
}

.rank-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #343434;
    margin-bottom: 10px;
}

.rank-item-desc {
    font-size: 14px;
    color: #999;
}

.map-chart {
    width: 100%;
    height: 350px;
}
</style>
